<template>
  <view class="comBox">
    <sickTitleCom></sickTitleCom>
    <view class="body">
      <view class="name titleBold">您的血脂情况（非必填）</view>
      <view class="inputBox">
        <span class="name lineHeight86 width300">总胆固醇</span>
        <input
          id="TCHO"
          v-model="mainData.TCHO"
          type="digit"
          class="uni-input lineHeight86 marginR110"
          name="TCHO"
          placeholder-class="phcolor"
        />
        <view class="unit">mmol/l</view>
        <view class="clear"></view>
      </view>
      <view class="inputBox">
        <span class="name lineHeight86 width300">甘油三酯</span>
        <input
          id="TG"
          v-model="mainData.TG"
          type="digit"
          class="uni-input lineHeight86 marginR110"
          name="TG"
          placeholder-class="phcolor"
        />
        <view class="unit">mmol/l</view>
        <view class="clear"></view>
      </view>
      <view class="inputBox">
        <span class="name lineHeight86 width300">高密度脂蛋白胆固醇</span>
        <input
          id="TG"
          v-model="mainData.HDL"
          type="digit"
          class="uni-input lineHeight86 marginR110"
          name="HDL"
          placeholder-class="phcolor"
        />
        <view class="unit">mmol/l</view>
        <view class="clear"></view>
      </view>
      <view class="inputBox">
        <span class="name lineHeight86 width300">低密度脂蛋白胆固醇</span>
        <input
          id="TG"
          v-model="mainData.LDL"
          type="digit"
          class="uni-input lineHeight86 marginR110"
          name="LDL"
          placeholder-class="phcolor"
        />
        <view class="unit">mmol/l</view>
        <view class="clear"></view>
      </view>
      <!-- 下一题上一题按钮 -->
      <nextProBtnCom @nextBtn="nextBtn" @proBtn="proBtn"></nextProBtnCom>
    </view>
  </view>
</template>

<script>
import { checkBetween } from '@/common/assessKeyCheck';
import nextProBtnCom from '@/components/nextProButton';
import sickTitleCom from './sickTitleCom';
import { ajaxSend } from './ajaxHealth.js';
import { mapGetters } from 'vuex';
export default {
  components: {
    // 上一题下一题组件
    nextProBtnCom,
    sickTitleCom
  },
  data() {
    return {
      mainData: {
        TCHO: '',
        TG: '',
        HDL: '',
        LDL: ''
      },
      array: ['umol/L', 'mg/dl'],
      index: 0
    };
  },
  computed: {
    ...mapGetters(['active', 'assessForm'])
  },
  mounted() {},
  methods: {
    async nextBtn() {
      // 先校验数据
      // ②录入值格式校验
      if (checkBetween(this.mainData.TCHO, '总胆固醇', 0.01, 15)) {
        uni.showToast({ title: `总胆固醇数据错误，请重新输入`, icon: 'none' });
        return false;
      }
      if (checkBetween(this.mainData.TG, '甘油三酯', 0.01, 12)) {
        uni.showToast({ title: `甘油三酯数据错误，请重新输入`, icon: 'none' });
        return false;
      }
      if (checkBetween(this.mainData.HDL, '高密度脂蛋白胆固醇', 0.01, 3)) {
        uni.showToast({
          title: `高密度脂蛋白胆固醇数据错误，请重新输入`,
          icon: 'none'
        });
        return false;
      }
      if (checkBetween(this.mainData.LDL, '低密度脂蛋白胆固醇', 0.01, 6)) {
        uni.showToast({
          title: `低密度脂蛋白胆固醇数据错误，请重新输入`,
          icon: 'none'
        });
        return false;
      }
      // 提交vuex assessForm值
      let submitData = this.assessForm;
      // 获取健康指标指导意见 判断是出健康提示还是直接下一步 start
      const checkKeyIsInput = [
        {
          nameKey: 'TCHO',
          title: '总胆固醇',
          healthGuidances: ['信息缺失，无法给出评估结论']
        },
        {
          nameKey: 'TG',
          title: '甘油三酯',
          healthGuidances: ['信息缺失，无法给出评估结论']
        },
        {
          nameKey: 'HDL',
          title: '高密度脂蛋白胆固醇',
          healthGuidances: ['信息缺失，无法给出评估结论']
        },
        {
          nameKey: 'LDL',
          title: '低密度脂蛋白胆固醇',
          healthGuidances: ['信息缺失，无法给出评估结论']
        }
      ];
      let healthData = await ajaxSend(this.mainData);
      Object.keys(this.mainData).forEach((key) => {
        submitData[key] = this.mainData[key];
        if (!this.mainData[key]) {
          healthData.push(...checkKeyIsInput.filter((item) => item.nameKey === key));
        }
      });
      let curActive = this.active + 1;
      if (healthData && healthData.length > 0) {
        // 如果有异常，则提示
        this.$store.commit('assessQuestion/SET_AJAXRESMESSAGE', healthData); // 存提示信息到vux，数组格式
        this.$store.commit('assessQuestion/SET_AJAXRES', true); // 开启提示
      } else {
        this.$store.commit('assessQuestion/SET_ACTIVE', curActive);
        this.$store.commit('assessQuestion/SET_AJAXRES', false);
      }
      this.$store.commit('assessQuestion/SET_ASSESSFORM', submitData);
      // 获取健康指标指导意见 判断是出健康提示还是直接下一步 end
    },
    proBtn() {
      let curActive = this.active - 1;
      this.$store.commit('assessQuestion/SET_ACTIVE', curActive);
    },
    bindPickerChange: function (e) {
      this.index = e.target.value;
    }
  }
};
</script>
